<!-- 模板测试 -->
<template>
  <div class="ky-container">
    <model-view ref="modelView" :form-items="formItems" :table-column="tableColumn" :api="api">
      <template v-slot:tool-box>
        <div class="content-title">
          <span>预约来源列表</span>
          <el-button type="primary" size="small" @click.stop="getRightPanel()"><i class="el-icon-plus icon"></i>新增测试</el-button>
        </div>
      </template>
      <template v-slot:operation-column>
        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="edit(scope.$index,scope.row)"><i class="el-icon-edit"></i>编辑</el-button>
            <el-button type="danger" size="small" @click="deleteItem(scope.$index,scope.row)"><i class="el-icon-delete"></i>删除</el-button>
          </template>
        </el-table-column>
      </template>
    </model-view>
  </div>
</template>

<script>
import modelView from '@/components/formTableView/index.vue'
import { getSourceenquiryPages, getDepAreaList, getDepList, getModalityList, getCheckRoomList, getItemList } from '@/api/api.js'
import dateTime from '@/utils/dateTime'
export default {
  name: '',
  mixins: [],
  components: { modelView },
  data() {
    return {
      api: getSourceenquiryPages,
      formItems: {
        'hospitalCode': {
          label: '医院名称',
          type: 'select',
          multiple: false,
          defaultValue: this.$store.state.user.hospitalCode,
          options: [],
          optionsLabel: 'name',
          optionsValue: 'code',
          selectChange: (val) => {
            this.handleChange('hospital', val)
          }
        },
        'depArea': {
          label: '影像区域',
          type: 'select',
          multiple: true,
          options: [],
          selectChange: (val) => {
            this.handleChange('depArea', val)
          }
        },
        'scheduledDep': {
          label: '检查部门',
          type: 'select',
          multiple: true,
          options: [],
          selectChange: (val) => {
            this.handleChange('scheduledDep', val)
          }
        },
        'scheduledModality': {
          label: '检查设备',
          type: 'select',
          multiple: true,
          options: [],
          selectChange: (val) => {
            this.handleChange('scheduledModality', val)
          }
        },
        'callRoom': {
          label: '检查机房',
          type: 'select',
          multiple: true,
          options: [],
          selectChange: (val) => {

          }
        },
        'checkStatus': {
          label: '检查状态',
          type: 'select',
          multiple: false,
          options: ['已申请', '未检查', '检查中', '已检查', '未审核', '已审核'],
          selectChange: (val) => {

          }
        },
        'appointmentType': {
          label: '预约来源',
          type: 'select',
          multiple: false,
          options: [],
          selectChange: (val) => {

          }
        },
        'patientName': {
          label: '患者姓名',
          type: 'input'
        },
        'accessionNo': {
          label: '访问号码',
          type: 'input'
        },
        'scheduledDttm': {
          label: '预约日期',
          type: 'datePicker',
          require: true,
          defaultValue: dateTime.formartDate()
        }
      },
      tableColumn: [
        {
          prop: 'hospitalCode',
          label: '医院',
          width: 130,
          formatter: this.frmHospital
        },
        {
          prop: 'depArea',
          label: '影像区域'
        },
        {
          prop: 'scheduledDep',
          label: '检查部门'
        },
        {
          prop: 'scheduledModality',
          label: '检查设备'
        },
        {
          prop: 'callRoom',
          label: '检查机房'
        },
        {
          prop: 'patientName',
          label: '患者姓名'
        },
        {
          prop: 'accessionNo',
          label: '访问号'
        },
        {
          prop: 'appointmentType',
          label: '预约来源'
        },
        {
          prop: 'checkDoctor',
          label: '检查医生'
        },
        {
          prop: 'scheduledDttm',
          label: '预约日期',
          formatter: this.frtTime
        },
        {
          prop: 'checkStatus',
          label: '检查状态'
        }
      ]
    }
  },
  watch: {},
  computed: {},
  created() {
    this.formItems.hospitalCode.options = this.mx_hospitalList
  },
  mounted() {
    this.handleChange('hospital')
  },
  methods: {
    edit(index, row) {
      console.log('row....', index, row)
    },
    deleteItem(index, row) {
      console.log('row....', index, row)
    },
    frtTime(row, column, cellValue, index) {
      // 处理后台时间
      let time = ''
      if (cellValue) {
        cellValue = cellValue.toString()
        time = cellValue.slice(0, 8)
      }
      return time
    },
    frmHospital(row, column) {
      if (!row.hospitalCode) {
        return ''
      }
      let obj = this.mx_hospitalList.find(v => {
        return v.code === row.hospitalCode
      })
      if (obj) {
        return obj.name
      } else {
        return ''
      }
    },
    getRightPanel() {

    },
    getTypeOptions() {
      // 获取预约来源
      this.formItems.appointmentType.options = []
      this.$refs.modelView.formData.appointmentType = ''
      let data = {
        HospitalCode: this.$refs.modelView.formData.hospitalCode,
        type: '预约来源'
      }
      return new Promise(async resolve => {
        await getItemList(data).then(res => {
          if (res && res.code === 10000) {
            this.formItems.appointmentType.options = res.content.list.map(_item => _item.item)
            resolve(res)
          }
        })
      })
    },
    handleChange(type, val) {
      switch (type) {
        case 'hospital':
          this.formItems.depArea.options = []
          this.$refs.modelView.formData.depArea = []
          this.formItems.scheduledDep.options = []
          this.$refs.modelView.formData.scheduledDep = []
          this.formItems.scheduledModality.options = []
          this.$refs.modelView.formData.scheduledModality = []
          this.formItems.callRoom.options = []
          this.$refs.modelView.formData.callRoom = []
          this.formItems.appointmentType.options = []
          this.$refs.modelView.formData.appointmentType = ''
          this.getDepAreaOptions()
          this.getTypeOptions()
          break
        case 'depArea':
          this.formItems.scheduledDep.options = []
          this.$refs.modelView.formData.scheduledDep = []
          this.formItems.scheduledModality.options = []
          this.$refs.modelView.formData.scheduledModality = []
          this.formItems.callRoom.options = []
          this.$refs.modelView.formData.callRoom = []
          this.getScheduledDepOptions()
          break
        case 'scheduledDep':
          this.formItems.scheduledModality.options = []
          this.$refs.modelView.formData.scheduledModality = []
          this.formItems.callRoom.options = []
          this.$refs.modelView.formData.callRoom = []
          this.getScheduledModalityOptions()
          break
        case 'scheduledModality':
          this.formItems.callRoom.options = []
          this.$refs.modelView.formData.callRoom = []
          this.getCallRoomOptions()
          break
        default:
          break
      }
    },
    getDepAreaOptions() {
      /* 影像区域列表 */
      this.formItems.depArea.options = []
      this.$refs.modelView.formData.depArea = []
      return new Promise(async resolve => {
        await getDepAreaList({ hospitalCode: this.$refs.modelView.formData.hospitalCode }).then(res => {
          if (res.code === 10000) {
            this.formItems.depArea.options = res.content.list
            this.getScheduledDepOptions()
            resolve(res)
          }
        })
      })
    },
    getScheduledDepOptions() {
      /* 检查部门列表 */
      this.formItems.scheduledDep.options = []
      this.$refs.modelView.formData.scheduledDep = []
      let params = {
        hospitalCode: this.$refs.modelView.formData.hospitalCode,
        depArea: this.$refs.modelView.formData.depArea.join(',')
      }
      return new Promise(async resolve => {
        await getDepList(params).then((res) => {
          if (res.code === 10000) {
            this.formItems.scheduledDep.options = res.content.list
            this.getScheduledModalityOptions()
            resolve(res)
          }
        })
      })
    },
    getScheduledModalityOptions() {
      /* 检查设备列表 */
      this.formItems.scheduledModality.options = []
      this.$refs.modelView.formData.scheduledModality = []
      let params = {
        hospitalCode: this.$refs.modelView.formData.hospitalCode,
        depArea: this.$refs.modelView.formData.depArea.join(','),
        dep: this.$refs.modelView.formData.scheduledDep.join(',')
      }
      return new Promise(async resolve => {
        await getModalityList(params).then((res) => {
          if (res.code === 10000) {
            this.formItems.scheduledModality.options = res.content.list
            this.getCallRoomOptions()
            resolve(res)
          }
        })
      })
    },
    getCallRoomOptions() {
      /* 检查机房列表 */
      this.formItems.callRoom.options = []
      this.$refs.modelView.formData.callRoom = []
      let params = {
        hospitalCode: this.$refs.modelView.formData.hospitalCode,
        depArea: this.$refs.modelView.formData.depArea.join(','),
        dep: this.$refs.modelView.formData.scheduledDep.join(','),
        modality: this.$refs.modelView.formData.scheduledModality.join(',')
      }
      return new Promise(async resolve => {
        await getCheckRoomList(params).then((res) => {
          if (res.code === 10000) {
            this.formItems.callRoom.options = res.content.list
            resolve(res)
          }
        })
      })
    }
  },
  beforeDestroy() {},
  destroyed() {},
  beforeUpdate() {},
  updated() {}
}
</script>
<style lang='scss' scoped>
.content-title:not(:empty){
    margin-bottom: 10px;
    span{
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
    }
    .el-button{
        width: 96px;
        height: 32px;
        margin-left: 16px;
    }
}
</style>
